import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import _ from 'lodash';
import '../css/footer.scss';
import pauseIcon from '../img/pause.svg';
import playIcon from '../img/play.svg';
import defualtsongCover from '../img/All we know cover.jpg';
import defualtSongSrc from '../audio/All we know.mp3';
import { SongInfo } from './Playlist';
import { SongsId, SongsDetail } from './Main';
import { cloudMusicAxios } from './Data/jaxData';
import './TinyComponents/Common';

class Footer extends Component {
      constructor(props) {
            super(props);
            this.state = {
                  Cover: defualtsongCover,
                  SongSrc: defualtSongSrc,
                  SongName: 'All We Know (Oliver Heldens Remix Radio Edit)',
                  Singer: 'The Chainsmokers & Oliver Heldens & Phoebe Ryan',
            }

            setInterval(() => {
                  if (SongInfo.src) {
                        if (window.isPlaylistNext) {
                              this.setState({
                                    Cover: SongInfo.coverUrl,
                                    SongSrc: SongInfo.src,
                                    SongName: SongInfo.name,
                                    Singer: SongInfo.singer,
                              });
                        }
                  }
            }, 300);
      }

      //用来处理暂停和播放的点击事件
      handleClickPause = () => {
            let aud = document.querySelector('#audio');
            let playPauseBtn = document.querySelector('.play-pause button');
            if (aud.paused) {
                  aud.play();
                  playPauseBtn.style.backgroundImage = 'url(' + pauseIcon + ')';
            } else {
                  aud.pause();
                  playPauseBtn.style.backgroundImage = 'url(' + playIcon + ')';
            }
      }

      handleClickNext = () => {
            window.isPlaylistNext = false;
            if (SongsId && SongsDetail) {
                  if (SongsId.length === SongsDetail.length) {
                        let randomId = _.sample(SongsId);
                        cloudMusicAxios.get('/music/url', {
                              params: {
                                    id: randomId,
                              }
                        })
                              .then((response) => {
                                    this.setState({
                                          SongSrc: _.map(_.map(response, 'data')[0], 'url')
                                    })
                              })
                              .catch((error) => {
                                    console.log(error);
                              });

                        cloudMusicAxios.get('/song/detail', {
                              params: {
                                    ids: randomId,
                              }
                        })
                              .then((response) => {
                                    let listData = response.data.songs;
                                    this.setState({
                                          Cover: _.map(_.map(listData, 'al'), 'picUrl'),
                                          SongName: _.map(listData, 'name'),
                                          Singer: (_.join(_.map(_.map(listData, 'ar')[0], 'name'), ' & ')).substring(0, 80),
                                    })
                              })
                              .catch((error) => {
                                    console.log(error);
                              });
                  } else {
                        alert('全部音源还未加载完毕，请稍等几秒.');
                  }
            } else {
                  alert('全部音源还未加载完毕，请稍等几秒..');
            }
      }

      componentDidMount() {
            //用来显示播放进度的处理事件
            let aud = document.querySelector('#audio');
            let prog = document.querySelector('.progress');
            let playPauseBtn = document.querySelector('.play-pause button');

            aud.onended = () => {
                  this.handleClickNext();
            }
            setInterval(function () {
                  let currentTime = (aud.currentTime / aud.duration) * 100;
                  prog.style.width = currentTime + '%';
                  if (currentTime === 100) {
                        playPauseBtn.style.backgroundImage = 'url(' + pauseIcon + ')';
                  }
            }, 1000);
      }

      render() {
            return (
                  <div className="footer-container" >
                        <div className="flex-container">
                              <div className="music-box">
                                    <audio src={this.state.SongSrc} id="audio" crossOrigin="anonymous" preload="auto" autoPlay="autoplay"></audio>
                                    <div className="control-panel">
                                          <div className="songinfo">
                                                <div className="song-cover">
                                                      <img src={this.state.Cover} alt="songcover" />
                                                </div>
                                                <div className="song-detail">
                                                      <div className="songname">{this.state.SongName}</div>
                                                      <div className="songwriter">{this.state.Singer}</div>
                                                </div>
                                          </div>
                                          <div className="control-items">
                                                <div className="play-pause control-item">
                                                      <button onClick={this.handleClickPause} ></button>
                                                </div>
                                                <div className="next control-item">
                                                      <button onClick={this.handleClickNext}></button>
                                                </div>
                                                <div className="playlist control-item">
                                                      <Link to="/playlist"></Link>
                                                </div>
                                          </div>
                                    </div>
                                    <div className="progress-bar">
                                          <div className="progress"></div>
                                    </div>
                              </div>
                        </div>
                  </div>
            )
      }
}

export default Footer;
